<template>
	<view class="container">
		<view class="consuming_hint" v-if="consuming" @click="checkConsimStatus">您有一个正在消费中的订单， <text
				style="color: #007AFF;"> 点击查看或结束〉</text></view>
		<view class="main">
			<view v-if="getMsgType === 1">
				<view class="banner">
					<image style="width: 750upx;height: 400upx;" src="../../static/images/hotWater/banner.jpg" alt="" />
				</view>
			</view>
			<view class="s_card radius" v-if="getMsgType === 1">
				<view class="scan_box">
					<view class="hint">
						<view class="hint_row hint_title">输入编号用水</view>
						<view class="hint_row">在水控机主屏中查看编号，并在下方横线处输入</view>
					</view>
				</view>
				<view style="position: relative">
					<view class="input_box_hotw">
						<text class="placeholder" :class="{'focus': focus}">输入编号</text>
						<input class="input" type="text" v-model="code" maxlength="7" confirm-type="查询"
							@confirm="get4gcode" @focus="showHistory" @input="showHistory" @blur="notFocus" />
						<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
					</view>
					<view class="history_box" v-if="history.length > 0">
						<ul>
							<li class="history_item" v-for="(item,index) in history" :key="index"
								@click="changeHistory(item)">
								<view class="history_code">{{item.code}}</view>
								<view class="history_msg">{{item.orgName + item.deviceNo}}号机</view>
							</li>
						</ul>
					</view>
				</view>
				<view v-if="resultStatus == 0">
					<view class="info_msg">
						<uni-icons type="shop" size="20" color="#999"></uni-icons>
						&nbsp;&nbsp;{{machineMsg.merchantName}}
					</view>
					<view class="info_msg">
						<uni-icons type="location-filled" size="20" color="#999"></uni-icons>
						{{`${machineMsg.orgName} ${machineMsg.deviceNo}号机`}}<!-- -->
					</view>
					<view class="info_msg" style="color: #007AFF;">
						<uni-icons type="help-filled" size="20" color="#007AFF"></uni-icons>单价：{{machineMsg.rate}}分/升
					</view>
				</view>
				<view class="queryCode" v-else-if="resultStatus == 1">
					<view class="loading">
						<image src="../../static/images/hotWater/loading.png" mode="scaleToFill"></image>数据加载中
					</view>
				</view>
				<view v-else>
					<view class="info_msg tip_not_find">{{tipNotFind}}</view>
				</view>
				<view v-if="resultStatus != 1" class="switchType">
					<view class="switchType_btn" @click="getMsgType = 2">
						扫码用水
						<image class="switchType_icon" src="../../static/images/hotWater/right.png" mode="scaleToFill">
						</image>
					</view>
				</view>
			</view>
			<view class="s_card radius" v-if="getMsgType === 2">
				<view class="scan_box">
					<view class="hint">
						<view class="hint_row hint_title">扫码用水</view>
						<view class="hint_row">扫描二维码，使用对应水控机</view>
					</view>
					<view class="scan" @click="scan">
						<view class="scan_circles">
							<image class="scan_icon" src="../../static/images/hotWater/scan.png" mode="scaleToFill">
							</image>
							<label class="scan_txt">开始扫码</label>
						</view>
					</view>
				</view>
				<view v-if="resultStatus == 0">
					<view class="info_msg">
						<uni-icons type="shop" size="20" color="#999"></uni-icons>
						&nbsp;&nbsp;{{machineMsg.merchantName}}
					</view>
					<view class="info_msg">
						<uni-icons type="location-filled" size="20" color="#999"></uni-icons>
						{{`${machineMsg.orgName} ${machineMsg.deviceNo}号机`}}<!--  -->
					</view>
					<view class="info_msg" style="color: #007AFF;">
						<uni-icons type="help-filled" size="20" color="#007AFF"></uni-icons>单价：{{machineMsg.rate}}分/升
					</view>
				</view>
				<view class="queryCode" v-else-if="resultStatus == 1">
					<view class="loading">
						<image src="../../static/images/hotWater/loading.png" mode="scaleToFill"></image>数据加载中
					</view>
				</view>
				<view v-else>
					<view class="info_msg tip_not_find">{{tipNotFind}}</view>
				</view>
				<view v-if="resultStatus != 1" class="switchType">
					<view class="switchType_btn" @click="getMsgType = 1">
						输入编号用水
						<image class="switchType_icon" src="../../static/images/hotWater/right.png" mode="scaleToFill">
						</image>
					</view>
				</view>
			</view>
			<view class="pay s_card radius">
				<!-- <view class="pay_title">
					限时使用
				</view> -->
				<view>
					<view class="useWaterHint">
						<!-- 请在<text class="time">{{time}}分钟</text>内使用， -->
						请选择预付金额，实际扣费以<text class="time">用水量</text>计算，剩余金额将原路退回
						<!-- 扣费以流量为准 -->
					</view>
					<view class="useWaterHint">
					</view>
				</view>
				<view class="payItem">
					<view class="btn" @click="changTime(1)" :class="{'pay-chang':payChang==1}">1.00元<image
							v-if="payChang==1" class="payItem_chk" src="../../static/images/hotWater/chang.png"
							mode="scaleToFill"></image>
					</view>
					<view class="btn" @click="changTime(2)" :class="{'pay-chang':payChang==2}">2.00元<image
							v-if="payChang==2" class="payItem_chk" src="../../static/images/hotWater/chang.png"
							mode="scaleToFill"></image>
					</view>
					<view class="btn" @click="changTime(5)" :class="{'pay-chang':payChang==5}">5.00元<image
							v-if="payChang==5" class="payItem_chk" src="../../static/images/hotWater/chang.png"
							mode="scaleToFill"></image>
					</view>
				</view>
				<view class="defined_chang" v-if="showDefinedInput">
					<view class="input_box_hotw">
						<text>￥ </text> <input class="input" type="digit" v-model="payChang" @blur="changTime"
							maxlength="5" />
					</view>
				</view>
				<view class="show_chang" @click="toggleDefined">
					自定义金额 <uni-icons :type="showDefinedInput?'arrowup':'arrowdown'" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="submit">
				<!-- #ifdef MP-ALIPAY -->
				<button open-type="getAuthorize" class="submitBtn radius_btn" @getAuthorize="bindGetUserInfo"
					@error="onAuthError" scope='userInfo'>
					{{consumdeStatus}}
					<uni-icons v-if="consuming" type="arrowthinright" color="#FFF" size="20"></uni-icons>
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="submitBtn radius_btn" open-type="getUserInfo"
					@getuserinfo="bindGetUserInfo">{{consumdeStatus}}
					<uni-icons v-if="consuming" type="arrowthinright" color="#FFF" size="20"></uni-icons>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- <view class="tabber">
			<view class="tabber_item" @click="tabChange = 1" :class="{'change_item': tabChange === 1}">用水</view>
			<view class="tabber_item" @click="tabChange = 2" :class="{'change_item': tabChange === 2}">消费记录</view>
		</view> -->
		
		<view class="hotWater_set" @click="toSettings">
			<image style="width: 48upx;height: 48upx;" src="../../static/images/hotWater/setting.png" alt="" />
		</view>
	</view>
</template>

<script>
	import {
		getOpenid,
		getInfo,
		getTatus,
		queryOrderList,
		queryConsumeStatus,
		getAccessToken
	} from '../../common/api/hot_water.js'
	import {
		isNull,
		getQueryString,
		strToDate
	} from '../../common/js/utils.js'
	import {
		WX_APPID,
		ALI_APPID
	} from '../../common/utils/config.js'
	let _this;
	export default {
		data() {
			return {
				btnBgColor: '#007AFF',
				btnBgActive: '#007AFF',
				height: '',
				time: 20,
				tipNotFind: '',
				defaultTime: 20,
				resultStatus: 88,
				payChang: 1,
				code: '',
				cardNo: '', // 卡号,
				totalBalance: 0,
				waterCardMsg: {},
				machineMsg: {
					deviceNo: '',
					orgId: '',
					orgName: '',
					code: this.code,
					merchantName: '',
					rate: 0,
					guid: ''
				},
				consumptionId: uni.getStorageSync('consumptionId'),
				payType: uni.getStorageSync('payType'), // 热水卡消费支付方式
				history: [],
				getMsgType: 2,
				showClearIcon: false,
				consuming: false,
				showDefinedInput: false,
				firstLoad: true,
				focus: false,
				
				// tabChange: 1
			}
		},
		onLoad(option) {
			console.log(option)
			setTimeout(() => {
				// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				// #endif
				_this = this;
				this.firstLoad = false
				if (!isNull(uni.getStorageSync('consumptionId'))) {
					if (uni.getStorageSync('payType') == 3) {
						this.getConsumeStatusForCard()
					} else {
						this.getConsumeStatusForWP()
					}
				}
				// uni.getSetting({
				// 	success(res) {
				// 		// #ifdef MP-WEIXIN
				// 		let canUserInfo = res.authSetting['scope.userInfo']
				// 		// #endif
				// 		// #ifdef MP-ALIPAY
				// 		let canUserInfo = res.authSetting.userInfo
				// 		// #endif
				// 		if (canUserInfo) {
				// 			uni.getUserInfo({
				// 				success: function(res) {
				// 					let userInfo;
				// 					// #ifdef MP-ALIPAY
				// 					userInfo = JSON.parse(res.response).response
				// 					if (userInfo.gender == "m") {
				// 						userInfo.gender = 1
				// 					} else if (userInfo.gender == "w") {
				// 						userInfo.gender = 2
				// 					} else {
				// 						userInfo.gender = 0
				// 					}
				// 					// delete userInfo.nickName
				// 					// #endif
				// 					// #ifdef MP-WEIXIN
				// 					userInfo = res.userInfo
				// 					// #endif
				// 					delete userInfo.nickName
				// 					_this.loginToken(userInfo).then(res => {
				// 						_this.firstLoadWithQrCode(option)
				// 					})
				// 				}
				// 			})
				// 		} else {
				// 			_this.loginToken().then(res => {
				// 				_this.firstLoadWithQrCode(option)
				// 			})
				// 		}
				// 	}
				// })
			}, 0)
		},
		onShow() {
			if(!this.firstLoad){
				if (!isNull(uni.getStorageSync('consumptionId'))) {
					if (uni.getStorageSync('payType') == 3) {
						this.getConsumeStatusForCard()
					} else {
						this.getConsumeStatusForWP()
					}
				} else {
					_this.consuming = false
				}	
			}
		},
		computed: {
			consumdeStatus() {
				return this.consuming ? '您有一个正在消费中的订单' : '开始'
			}
		},
		methods: {
			// 手动本程序扫码
			scan() {
				uni.scanCode({
					scanType: ['qrCode', 'pdf417', 'barCode'],
					success: function(res) {
						let qrCode;
						let result;
						qrCode = res.result
						if (qrCode) {
							result = getQueryString(qrCode, 'scene') /* .split('-') */
							_this.code = result
							_this.get4gcode()
						}
					}
				});
			},
			// 首次加载并扫码
			firstLoadWithQrCode(option) {
				console.log(option)
				// 扫码进入本程序
				// #ifdef MP-WEIXIN
				let qrCode = getQueryString(decodeURIComponent(option.q), 'scene')
				// #endif
				// #ifdef MP-ALIPAY
				let qrCode = uni.getStorageSync('qrCode')
				// #endif
				if (!isNull(qrCode)) {
					_this.code = qrCode
					_this.get4gcode()
				}
			},
			// 通过编码获取水控机
			get4gcode() {
				_this.resultStatus = 1
				setTimeout(() => {
					this.hideHistory()
				}, 0)
				return new Promise((resolve, reject) => {
					let parameters;
					if (this.code == "") {
						this.resultStatus = 88
						this.tipNotFind = '请输入正确的编码或扫描正确的水控机二维码'
						uni.showToast({
							icon: 'none',
							title: this.tipNotFind
						})
						// this.tipNotFind = '请扫描正确的水控机二维码'
						reject('请输入正确的编码或扫描正确的水控机二维码')
						return
					}
					parameters = {
						qrcodeId: this.code,
						// #ifdef MP-WEIXIN
						flag: 1,
						// #endif
						// #ifdef MP-ALIPAY
						flag: 2,
						// #endif
					}
					getTatus(parameters).then(res => {
						this.resultStatus = res.code
						if (res.code == 0 && res.data.resultCode == 0) {
							this.machineMsg = {
								orgName: res.data.orgName,
								orgId: res.data.orgId,
								deviceNo: res.data.machNo,
								code: res.data.qrcodeId,
								merchantName: res.data.merchantName,
								rate: res.data.rate / 10,
								guid: res.data.guid,
							}
							//TODO:跳转需要至对应小程序
							// if (this.getMsgType === 1) {
							this.saveOrUpdataHistory({
								code: res.data.qrcodeId,
								deviceNo: res.data.machNo,
								orgName: res.data.orgName,
								merchantName: res.data.merchantName
							})
							// }
							resolve({
								orgName: res.orgName,
								orgId: res.orgId,
								deviceNo: res.deviceNo,
								code: res.data.qrcodeId
							})
						} else if (res.data) {
							this.resultStatus = 88
							if (res.data.resultCode == 1 || res.data.resultCode == 2 || res.data
								.resultCode == 3) {
								this.tipNotFind = "设备正在使用中，请稍后再进行使用"
							} else if (res.data.resultCode == 5) {
								this.tipNotFind = "设备未连接，请检查连接情况"
							} else if (res.data.resultCode == 4 || res.data.resultCode == 6) {
								this.tipNotFind = "网络超时，请稍后重试"
							}
							reject(this.tipNotFind)
						} else {
							this.resultStatus = 88
							this.tipNotFind = res.msg
						}
					}).catch(err => {
						this.resultStatus = 88
						this.tipNotFind = "未知错误，请稍后重试"
						uni.showModal({
							title: '提示',
							content: err,
							confirmColor: "#007AFF",
							showCancel: false
						});
						reject(err)
					})
				})
			},
			changTime(idx) {
				if (typeof idx === "number") {
					this.time = this.defaultTime * idx
					this.payChang = idx
				} else {
					let val = idx.detail.value
					val = val == "" ? "0" : val
					val = val > 10 ? 10 : val && val < 0.05 ? 0.05 : val
					this.payChang = parseFloat(parseFloat(val).toFixed(2))
					this.time = parseFloat((this.defaultTime * this.payChang).toFixed(2))
				}
			},
			// 获取token（隐性登录）
			loginToken(user = {}) {
				return new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					wx.login({
						provider: 'weixin',
						success: function(loginRes) {
							getOpenid({
								code: loginRes.code,
								xappId: WX_APPID
							}).then(resOpenid => {
								if (resOpenid.code !== 0) return
								uni.setStorageSync('LOGIN_TOKEN', resOpenid.data.signKey)
								user['wxUserId'] = resOpenid.data.openid
								user['signKey'] = resOpenid.data.signKey
								_this.getUserInfo(user)
								resolve(resOpenid.data.signKey)
							}).catch(err => {
								console.log(err)
							})
						}
					});
					// #endif
					// #ifdef MP-ALIPAY
					my.getAuthCode({
						scopes: 'auth_base', // 主动授权：auth_user，静默授权：auth_base。或者其它scope
						success: (codeRes) => {
							if (codeRes.authCode) {
								console.log(codeRes.authCode)
								getAccessToken({
									code: codeRes.authCode,
									xappId: ALI_APPID
								}).then((resAliUserId) => {
									if (resAliUserId.code !== 0) return
									uni.setStorageSync('LOGIN_TOKEN', resAliUserId.data
										.signKey)
									user['alipayUserId'] = resAliUserId.data.aliUserId
									user['access_token'] = resAliUserId.data.access_token
									user['signKey'] = resAliUserId.data.signKey
									_this.getUserInfo(user)
									resolve(resAliUserId.data.signKey)
								})
							}
						},
						fail: (res) => {
							reject(res)
							console.log(res)
						}
					});
					// #endif
				})
			},
			// 登录和获取用户信息（显性登录）
			getUserInfo(user) {
				getInfo(user).then(res => {
					if (res.code === 0) {
						// #ifdef MP-WEIXIN
						delete res.data.wxUserId
						// #endif
						// #ifdef MP-ALIPAY
						delete res.data.alipayUserId
						// #endif
						uni.setStorageSync('userInfo', res.data)
					}
				})
			},
			// 获取用户信息授权（显性登录）
			bindGetUserInfo(res) {
				// #ifdef MP-WEIXIN
				if (res.detail.userInfo) {
					uni.showTabBar()
					let user = uni.getStorageSync('userInfo')
					if (isNull(user.nickName)) {
						this.loginToken(res.detail.userInfo)
					}
				}
				// #endif

				// #ifdef MP-ALIPAY
				my.getOpenUserInfo({
					success: (res) => {
						uni.showTabBar()
						let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
						if (userInfo.gender == "m") {
							userInfo.gender = 1
						} else if (userInfo.gender == "w") {
							userInfo.gender = 2
						} else {
							userInfo.gender = 0
						}
						this.loginToken(userInfo)
					}
				});
				// #endif
				this.checkConsimStatus()
			},
			// 消费状态
			checkConsimStatus() {
				if (!this.consuming) {
					if (this.machineMsg.code == this.code) {
						uni.navigateTo({
							url: `../pageConsumde/consumde?advancTime=${_this.time}&advanceAmount=${_this.payChang}&machineMsg=${JSON.stringify(_this.machineMsg)}&code=${_this.code}`,
						});
					} else {
						uni.showLoading({
							title: '设备匹配中...',
							icon: 'none'
						})
						this.get4gcode().then(res => {
							uni.hideLoading()
							if (this.code != '' && this.resultStatus == 0) {
								uni.navigateTo({
									url: `../pageConsumde/consumde?advancTime=${_this.time}&advanceAmount=${_this.payChang}&machineMsg=${JSON.stringify(_this.machineMsg)}&code=${_this.code}`,
								});
							}
						}).catch(err => {
							uni.hideLoading()
						})
					}
				} else {
					uni.navigateTo({
						url: '../pageConsumde/consuming',
					});
				}
			},
			onAuthError(res) {
				this.checkConsimStatus()
			},
			showHistory(val) {
				this.focus = true
				let historyStr = uni.getStorageSync('deviceCede-4G')
				let history = historyStr == '' ? [] : historyStr
				this.history = val.detail.value == '' ? history : (history.filter(el => el.code.includes(val.detail
					.value)))
				if (val.detail.value != '') {
					this.showClearIcon = true;
				}
			},
			notFocus(e) {
				if (e.detail.value == '') {
					this.focus = false
				}
			},
			changeHistory(hist) {
				this.code = hist.code
				if (hist.code !== '') {
					this.focus = true
				}
				this.$nextTick(() => {
					this.history = []
				})
				this.get4gcode();
			},
			// 保存或者新增历史记录
			saveOrUpdataHistory(histItem) {
				let historyStr = uni.getStorageSync('deviceCede-4G')
				let codeList = historyStr == '' ? [] : historyStr.filter(el => el.code !== histItem.code)
				if (codeList.length > 4) codeList.splice(4, 1)
				codeList.unshift(histItem)
				uni.setStorageSync('deviceCede-4G', codeList)
			},
			clearIcon() {
				this.code = '';
				this.showClearIcon = false;
				this.focus = false
				this.get4gcode();
			},
			hideHistory() {
				this.history = []
			},
			// 判断上次是否还有消费状态 --- 支付宝&&微信
			getConsumeStatusForWP() {
				queryOrderList({
					'consumptionId': uni.getStorageSync('consumptionId')
				}).then(res => {
					if (res.code === 0) {
						if (res.data.list.length === 0) return
						let timeS = parseInt(res.data.list[0].advanceTime - ((new Date()).getTime() - (strToDate(
									res.data.list[0].payTime))
								.getTime()) /
							1000)
						// if (res.data.list[0].refundStatus == 1 && timeS > 0) {
						if (res.data.list[0].refundStatus != 3 && res.data.list[0].refundStatus != 2 && timeS > 0) {
							_this.consuming = true
						} else {
							_this.consuming = false
							uni.removeStorageSync('consumptionId')
							uni.removeStorageSync('guid')
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.resultMsg
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 判断上次是否还有消费状态 --- 校园IC卡
			getConsumeStatusForCard() {
				uni.showLoading({
					title: '数据加载中...',
					duration: 2100
				});
				clearTimeout(this.statusTimer)
				queryConsumeStatus({
					'consumptionId': uni.getStorageSync('consumptionId')
				}).then(res => {
					if (res.resultCode == 0) {
						if (!res.advanceTime) return
						let timeS = parseInt(res.advanceTime * 60 - ((new Date()).getTime() - (strToDate(res
								.payTime)).getTime()) /
							1000)
						if (res.payStatus == 1 && timeS > 0) {
							_this.consuming = true
						} else {
							_this.consuming = false
							uni.removeStorageSync('consumptionId')
							uni.removeStorageSync('guid')
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toggleDefined() {
				this.showDefinedInput = !this.showDefinedInput
				if (!this.showDefinedInput) {
					this.payChang = 1
					this.time = this.defaultTime
				}
			},
			toSettings(){
				uni.navigateTo({
					url: "../pageMe/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F0F5;
		box-sizing: border-box;
	}

	.container {
		line-height: 24px;
		background-color: #F1F0F5;
		
		// .tabber{
		// 	height: 100rpx;
		// 	display: flex;
		// 	flex-direction: row;
		// 	justify-content: space-around;
		// 	align-items: center;
		// 	box-shadow: 0px -2px 10px 2px #dedede;
		// 	.tabber_item{
		// 		flex: 1;
		// 		height: 100%;
		// 		line-height: 100rpx;
		// 		text-align: center;
		// 		&.change_item{
		// 			color: #007AFF;
		// 		}
		// 	}
		// }

		.main {
			padding-top: 24rpx;
			box-sizing: border-box;
			height: 100vh;
		}

		.consuming_hint {
			width: 100%;
			text-align: center;
			background-color: #ffe6e2;
			box-shadow: 0px 2px 8px 0px #ededed;
			position: sticky;
			font-size: 28rpx;
			line-height: 56rpx;
			top: 0;
			z-index: 10;
		}

		.input_box_hotw {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1upx solid #ededed;
			padding: 0 24upx;
			margin: 12upx 0;
			border-radius: 6upx;
			font-weight: bold;
			font-size: 70upx;
			position: relative;

			.input {
				width: 100%;
				height: 70upx;
				padding: 36upx 12px;
				width: 100%;
				font-size: 70upx;
				background-color: transparent;
			}

			.placeholder {
				font-size: 46upx;
				position: absolute;
				top: 50%;
				left: 60upx;
				transform: translateY(-50%);
				transition: all 0.25s;
				color: #999;

				&.focus {
					transform: translateY(-170%);
					left: 24upx;
					font-size: 36upx;
					color: #007AFF;
				}
			}
		}

		.useWaterHint {
			font-size: 30upx;
			color: #999;
			text-align: left;

			.time {
				font-size: 50upx;
				line-height: 70upx;
				font-weight: bolder;
				text-align: center;
				// padding: 20px;
				color: #007AFF;
			}
		}

		.show_chang {
			text-align: center;
			color: #999;
			font-size: 24upx;
		}

		.payItem {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			line-height: 40px;
			align-items: center;
			margin: 10px 0;

			.btn {
				width: 30%;
				text-align: center;
				border: 1px solid #CCC;
				border-radius: 2px;
				overflow: hidden;
				position: relative;
				cursor: pointer;

				.payItem_chk {
					width: 38upx;
					height: 32upx;
					position: absolute;
					bottom: -2upx;
					right: -2upx;
				}

				&.pay-chang {
					border: 1px solid #007AFF;
					color: #007AFF;
				}
			}
		}

		.history_box {
			position: absolute;
			right: 0;
			left: 0;
			box-shadow: 0px 2px 8px 0px #ededed;
			z-index: 999;

			.history_item {
				padding: 12upx 30upx;
				background: #FFF;
				transition: all 0.2s;
				border-bottom: 1px dashed #eee;

				&:active {
					background: #3671b8;
					color: #FFF;
				}

				.history_code {
					font-size: 44upx;
				}

				.history_msg {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.scan_box {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			padding: 24upx 0;

			.hint {
				margin-top: 36upx;

				.hint_row {
					padding: 12upx;
					font-size: 28upx;
					color: #999;

					&.hint_title {
						color: #333;
						font-size: 40upx;
						font-weight: bold;
					}
				}
			}

			.scan {
				width: 230upx;
				height: 230upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: #abe9ff;
				border: none;

				.scan_circles {
					width: 210upx;
					height: 210upx;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #007AFF;
					background-image: linear-gradient(135deg, #00c4ff, #014dff);
					border: none;

					.scan_icon {
						width: 90upx;
						height: 90upx;
					}

					.scan_txt {
						font-size: 30upx;
						color: #FFF;
					}
				}
			}
		}

		.info_msg {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #999;
			font-size: 30upx;
			padding: 0 24upx;
			padding-top: 12upx;

			&.tip_not_find {
				color: #E4393c;
			}
		}

		.switchType {
			padding-top: 24upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.switchType_btn {
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.switchType_icon {
				width: 48upx;
				height: 48upx;
			}
		}
	}

	.hotWater_set{
		padding: 24upx;
		background-color: rgba($color: #999, $alpha: 0.8);
		position: fixed;
		bottom: 24upx;
		right: 24upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		color: #007AFF;
		border-radius: 50%;
	}
	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 8px 13px;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 22px;
		font-weight: normal;
		font-style: normal;
		width: 22px;
		height: 22px;
		line-height: 22px;
		color: #999999;
	}
</style>
